<!--
 @description  办事处核心指标
 @fileName CoreData.vue
 @author zengqiongying
 @created 2021/06/30 16:00:24
-->
<template>
  <div>
    <div class="core-box">
      <div class="core-item" @click="handleCoreDetail('car')">
        <div class="c-title" @click.stop="openInstrusction('logistics','care')">
          <img class="icon" src="@/assets/image/img_car_red.png">
          配车(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="today">今日<span class="color-red">{{ carQuantity.today | filterForamtThousand }}</span></div>
        <div class="month">
          <div>昨日<span class="color-red">{{ carQuantity.yesterday | filterForamtThousand }}</span></div>
          <div>本月<span class="color-red">{{ carQuantity.month | filterForamtThousand }}</span></div>
        </div>
        <div class="other mt10">待配车<span class="color-red">{{ carQuantity.waitCare | filterForamtThousand }}</span></div>
      </div>
      <div class="core-item" @click="handleCoreDetail('arrive')">
        <div class="c-title" @click.stop="openInstrusction('logistics','arrive')">
          <img class="icon" src="@/assets/image/img_car_blue.png">
          到车(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="today">今日<span class="color-blue">{{ arriveQuantity.today | filterForamtThousand }}</span></div>
        <div class="month">
          <div>昨日<span class="color-blue">{{ arriveQuantity.yesterday | filterForamtThousand }}</span></div>
          <div>本月<span class="color-blue">{{ arriveQuantity.month | filterForamtThousand }}</span></div>
        </div>
        <div class="other mt10">计划到车<span class="color-blue">{{ arriveQuantity.planArrive | filterForamtThousand }}</span></div>
      </div>
      <div class="core-item" @click="handleCoreDetail('ship')">
        <div class="c-title" @click.stop="openInstrusction('logistics','ship')">
          <img class="icon" src="@/assets/image/img_logistics@2x.png">
          启运合同(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="today">今日<span class="color-yellow">{{ shipQuantity.today | filterForamtThousand }}</span></div>
        <div class="month">
          <div>昨日<span class="color-yellow">{{ shipQuantity.yesterday | filterForamtThousand }}</span></div>
          <div>本月<span class="color-yellow">{{ shipQuantity.month | filterForamtThousand }}</span></div>
        </div>
        <div class="other mt10">未启运<span class="color-yellow">{{ shipQuantity.waitShip | filterForamtThousand }}</span></div>
      </div>
      <div class="core-item" @click="handleCoreDetail('practical')">
        <div class="c-title" @click.stop="openInstrusction('logistics','practical')">
          <img class="icon" src="@/assets/image/img_shippractical@2x.png">
          启运实际(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="today">今日<span class="color-green">{{ practicalShip.today | filterForamtThousand }}</span></div>
        <div class="month">
          <div>昨日<span class="color-green">{{ practicalShip.yesterday | filterForamtThousand }}</span></div>
          <div>本月<span class="color-green">{{ practicalShip.month | filterForamtThousand }}</span></div>
        </div>
        <div class="other mt10">未启运<span class="color-green">{{ practicalShip.waitShip | filterForamtThousand }}</span></div>
      </div>
    </div>
    <div class="core-update-time">
      统计截止时间: {{ showDate }}
    </div>
    <van-popup v-model="showCoreDetail" round closeable class="custom-van-pop">
      <core-detail v-if="showCoreDetail" :office-name="officeName" :detail-type="currentType" :select-date="coreDate" />
    </van-popup>
    <van-popup v-model="showCorePracticalDetail" round closeable class="custom-van-pop" style="width:90%">
      <core-practical-ship-detail v-if="showCorePracticalDetail" :office-name="officeName" :select-date="coreDate" />
    </van-popup>
  </div>
</template>

<script>import { parseTime } from '@/utils'
import { getLogisticsOfficeCoreCareQuantity, getLogisticsOfficeCorePracticalShipQuantity, getLogisticsOfficeCoreShipQuantity, getLogisticsOfficeCoreArriveQuantity } from '@/apis/logistics'
import showDateMixin from '@/mixins/showCoreTime'
import CoreDetail from '../../components/CoreDetail'
import CorePracticalShipDetail from '@/components/logistics/CorePracticalShipDetail'
export default {
  name: 'LogisticsOfficeCoreData',
  components: { CorePracticalShipDetail, CoreDetail },
  mixins: [showDateMixin],
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }
  },
  data() {
    return {
      provinceName: this.$route.query.provinceName || '',
      officeName: this.$route.query.officeName || '',
      shipQuantity: {
        today: '-',
        yesterday: '-',
        month: '-',
        waitShip: '-'
      }, // 启运数
      arriveQuantity: {
        today: '-',
        yesterday: '-',
        month: '-',
        planArrive: '-'
      }, // 到车数
      carQuantity: {
        today: '-',
        yesterday: '-',
        month: '-',
        waitCare: '-'
      }, // 配车数
      practicalShip: {
        today: '-',
        yesterday: '-',
        month: '-',
        waitShip: '-'
      }, // 启运实际
      currentType: '', // 当前查看详情的类型
      showCoreDetail: false,
      showCorePracticalDetail: false // 查看实际启运详
    }
  },

  watch: {
    coreDate(val, oldVal) {
      this.getQuantityData()
    }
  },
  created() {
    this.getQuantityData()
  },
  methods: {
    getQuantityData() {
      const date = parseTime(this.coreDate, '{y}-{m}-{d}')
      const params = { date, officeName: this.officeName }
      // 核心指标-订单配车
      getLogisticsOfficeCoreCareQuantity(params).then(res => {
        if (res.data) {
          this.$set(this.carQuantity, 'today', res.data.todayCareQuantity || '-')
          this.$set(this.carQuantity, 'yesterday', res.data.yesterdayCareQuantity || '-')
          this.$set(this.carQuantity, 'month', res.data.monthCareQuantity || '-')
          this.$set(this.carQuantity, 'waitCare', res.data.waitCareQuantity || '-') // TODO：待加入接口
        }
      })
      // 核心指标-物流到车
      getLogisticsOfficeCoreArriveQuantity(params).then(res => {
        if (res.data) {
          this.$set(this.arriveQuantity, 'today', res.data.todayArriveQuantity || '-')
          this.$set(this.arriveQuantity, 'yesterday', res.data.yesterdayArriveQuantity || '-')
          this.$set(this.arriveQuantity, 'month', res.data.monthArriveQuantity || '-')
          this.$set(this.arriveQuantity, 'planArrive', res.data.planQuantity || '-') // TODO：待加入接口
        }
      })

      // 核心指标-物流启运
      getLogisticsOfficeCoreShipQuantity(params).then(res => {
        if (res.data) {
          this.$set(this.shipQuantity, 'today', res.data.todayShipQuantity || '-')
          this.$set(this.shipQuantity, 'yesterday', res.data.yesterdayShipQuantity || '-')
          this.$set(this.shipQuantity, 'month', res.data.monthShipQuantity || '-')
          this.$set(this.shipQuantity, 'waitShip', res.data.notShipQuantity || '-')
        }
      })
      // 核心指标-物流实际启运
      getLogisticsOfficeCorePracticalShipQuantity(params).then(res => {
        if (res.data) {
          this.$set(this.practicalShip, 'today', res.data.todayPracticalShipQuantity || '-')
          this.$set(this.practicalShip, 'yesterday', res.data.yesterdayPracticalShipQuantity || '-')
          this.$set(this.practicalShip, 'month', res.data.monthPracticalShipQuantity || '-')
          this.$set(this.practicalShip, 'waitShip', res.data.notPracticalShipQuantity || '-')
        }
      })
    },

    handleCoreDetail(type) {
      if (type === 'practical') {
        this.showCorePracticalDetail = true
        return
      }
      this.currentType = type
      this.showCoreDetail = true
    }
  }
}

</script>
<style lang='less' scoped>
 .core-box{
    position: relative;
    display:flex;
    flex-wrap: wrap;
    &::before{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: #F5F6F7;
    }
    .core-item{
      position: relative;
      width: 50%;
      height: 132px;
      padding:15px 10px;
      border-bottom:1px solid #F5F6F7;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #888;
      font-size: 12px;
      &::after{
        content: '';
        position: absolute;
        right: 0;
        top: 15px;
        bottom: 15px;
        width: 1px;
        background:#F5F6F7 ;
      }
      &:nth-child(3n){
        border-right: 0;
        &::after{
          display: none;
        }
      }
      .today{
        display: flex;
        align-items:center;
        justify-content: center;
        height: 24px;
        line-height: 24px;
        margin-bottom: 10px;
        span{
          margin-left: 2px;
          font-size: 20px;
          font-family: 'PFZH';
        }
      }
      .month{
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 16px;
        font-size:10px;
        white-space: nowrap;
        letter-spacing: 0;
        div:last-child{
          margin-left:5px;
        }
        span{
          margin-left: 1px;
        }
      }
      .other{
        margin-top: 8px;
        display: flex;
        align-items:center;
        justify-content: center;
        height: 16px;
        line-height: 16px;
        span{
          margin-left: 1px;
          font-size: 12px;
        }
      }
    }
  }

  .c-title{
    height: 20px;
    display: flex;
    justify-content: center;
    align-items:center;
    margin-bottom: 10px;
    color: #999;
    font-size: 12px;
    font-family: 'PFZH';
    white-space: nowrap;
    .icon{
      margin-right: 5px;
      width: 18px;
      height: auto;
    }
  }

  .core-update-time{
    border-top:1px solid #F5F6F7;
    padding-top: 10px;
    line-height: 18px;
    text-align: center;
    color: #999999;
    letter-spacing: 1px;
    font-size: 12px;
  }
</style>
